<template>
	<view>
		<uni-popup ref="popup" type="bottom" custom :show="show" position="bottom" @hidePopup="cancelShow">
			<view class="shareModal">
				<view class='shareBox'>
					<view class='share_item' @tap="share('WXSceneSession')">
						<image src="../../static/img/haoyou.png" mode="widthFix"></image>
						<text>微信好友</text>
					</view>
					<view class='share_item' @tap="share('WXSenceTimeline')">
						<image src="../../static/img/pengyouquan.png" mode="widthFix"></image>
						<text>微信朋友圈</text>
					</view>
				</view>
				<view class='share_bottom' @click="cancelShow"><text>取消</text></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "./uni-popup.vue"
	export default {
		name: 'UniShare',
		components: {uniPopup},
		props: {
			/**
			 * 页面显示
			 */
			shareShow: {
				type: Boolean,
				default: false
			},
			contents:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				content:this.contents,
				show:this.shareShow,
				bottomData: [{
						text: '微信',
						icon: '\ue6a4',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '\ue646',
						name: 'wx'
					},
				]
			};
		},	
		methods:{
			cancelShow(){
				this.show = false
				this.$emit('cancelshow')
			},
			share(scene){
				console.log(scene,this.content.title1,'=======')
				uni.share({ 
				    provider: "weixin",
				    scene,
				    type: 0,
				    href: this.content.href,
				    title: this.content.title1,
				    summary: this.content.desc,
				    imageUrl: this.content.thumb,
				    success: (e) => {
				    	console.log('success', e);
				    	uni.showToast({
				    		icon: 'none',
				    		title:'分享成功',
				    		duration:2000
				    	})
				    },
				    fail: (e) => {
				    	console.log('fail', e)
				    	uni.showToast({
				    		icon: 'none',
				    		title:e.errMsg,
				    		duration:3000
				    	})
				    },
				    complete:function(){
				    	console.log('分享操作结束!')
				    }
				});
			}
		},
		mounted() {
			// console.log(this.show,999)
		},
		watch:{
			shareShow(v){
				this.show = v
			},
			contents(v){
				this.content = v
				console.log(this.content,8888888)
			}
		}
	}
</script>

<style lang="scss">
	.shareModal{
		// padding-bottom: 88upx;
		.shareBox{
			height: 198upx;
			background: #fff;
			width: 100%;
			display: flex;
			.share_item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				image{
					width: 66upx;
				}
				text{
					font-size:24upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
				}
			}
		}
		.share_bottom{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88upx;
			background:#F4F4F4;
			width: 100%;
			position: position;
			left: 0;
			bottom: 0;
		}
	}
</style>
